<script setup lang="ts">
import {userStorei} from "@/stores/user_store";
import {type FileItem, Message} from "@arco-design/web-vue";
import type{ baseResponse} from "@/api";

const store = userStorei()

interface Props {
  modelValue: string
  label?: string
  size?: number
}

const props = defineProps<Props>()
const {size = 60} = props
const emits = defineEmits(["update:modelValue"])

function fileSuccess(fileItem: FileItem) {
  const res = fileItem.response as baseResponse<string>
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success("上传成功")
  emits("update:modelValue", res.data)
}

function input(val: string) {
  emits("update:modelValue", val)
}

</script>

<template>
  <div class="f_image_input" :style="{'--size': size + 'px'}">
    <a-upload
        :show-file-list="false"
        action="/api/image"
        name="file"
        :headers="{token: store.userInfo.token}"
        @success="fileSuccess"
    >
      <template #upload-button>
        <a-image :preview="false" :src="props.modelValue" :width="size"></a-image>
      </template>
    </a-upload>
    <a-input :model-value="props.modelValue" @input="input"
             :placeholder="props.label"></a-input>
  </div>
</template>

<style lang="less">
.f_image_input {
  width: 100%;

  .arco-input-wrapper {
    width: calc(100% - var(--size) - 10px);
    margin-left: 10px;
  }
}
</style>